/*
 * @Author: shawnxiao
 * @Date: 2021-11-15 17:08:42
 * @LastEditTime: 2021-11-15 17:42:56
 * @FilePath: /gatt-react/src/components/DynamicFormReader/FormField/SketchPickerField.tsx
 */
import React, {useState} from 'react'
import { SketchPicker } from 'react-color'
import { Form } from 'antd'
const FormItem = Form.Item

function SketchPickerField(props:any) {
  const { config } = props
  const {value, key, title, labelCol = {span: 10, offset: 0}, wrapperCol = {span: 24, offset: 0}, fieldKey, tooltip, rules, dataIndex, valuePropName, ...rest} = config
  const [defaultValue, setDefaultValue] = useState(value)
  const onChangeComplete = (color:any) => {
    setDefaultValue(color.hex)
  }

  return (
    <FormItem
      className="form-item-com-custom"
      initialValue={value}
      valuePropName={valuePropName}
      data-index={dataIndex}
      label={title}
      tooltip={tooltip}
      name={key}
      fieldKey={fieldKey}
      key={`${key}`}
      rules={rules}
      labelCol={labelCol}
      wrapperCol={wrapperCol}>
      <SketchPicker
        color={defaultValue}
        onChangeComplete={onChangeComplete}
        {...rest}
      />
    </FormItem>
  )
}

export default SketchPickerField
